<template>
  <div>
    <div class="title-line list-caption">所属主题配置</div>

    <ul class="theme-config--list mt20 f14">
      <li
        v-for="(theme, i) of themeList"
        :key="i"
        class="theme-config--item relative pointer"
        :class="theme.active && 'active'"
        @click="handleThemeClick(theme)"
      >
        <div v-show="!theme.edit">
          <span>{{ theme.text }}</span>
          <div class="tc-oper f12">
            <button class="button-empty-style pointer" @click.stop="handleThemeMove('up', theme, i)">上移</button>
            <button class="button-empty-style pointer" @click.stop="handleThemeMove('down', theme, i)">下移</button>
            <button class="button-empty-style pointer" @click.stop="handleThemeEdit(theme)">编辑</button>
            <Poptip ref="poptipDelete" confirm title="确定删除?" transfer @on-ok="handleThemeRemove(theme)">
              <button class="button-empty-style pointer" @click.stop="handleThemeDelete(i)">删除</button>
            </Poptip>
          </div>
        </div>

        <div v-show="theme.edit">
          <input
            v-show="theme.edit"
            v-model="theme.text_ipt"
            class="tc-ipt"
            type="text"
            placeholder="输入内容"
            @click.stop="() => {}"
          />

          <div class="tc-oper--edit">
            <icon-button
              icon="complete"
              title="完成"
              :activated="false"
              @click.native.stop="handleThemeEditComplete(theme)"
            ></icon-button>
            <icon-button
              icon="close"
              title="取消"
              class="ml4"
              :activated="false"
              @click.native.stop="handleThemeEditCancel(theme)"
            ></icon-button>
          </div>
        </div>
      </li>

      <li class="theme-config--item pointer" @click="handleAddTheme">
        <IconButton
          icon="add_active"
          class="ml12"
          title="添加"
          :activated="false"
          style="vertical-align: sub"
        ></IconButton>
      </li>
    </ul>
  </div>
</template>

<script>
// api
import { classifyAdd, classifyUpdate, classifyOrderUpdate, classifyRemove } from '@/api/system'

// vuex
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('system')

const createTheme = (text, edit, obj) => ({ text, text_ipt: text, edit, active: false, ...obj })
export default {
  name: 'NeededTypeConfig',

  data: () => ({
    // themeList: [createTheme('所属主题配置1'), createTheme('所属主题配置2'), createTheme('所属主题配置3')],
    themeList: [],

    operType: '', // add edit
  }),

  computed: {
    comThemeList() {
      const list = this.$store.getters.themeList
      if (!Array.isArray(list)) return []
      return list
    },
  },

  watch: {
    comThemeList: {
      handler(list) {
        // console.log('comThemeList', list)
        this.themeList = list.map((it) => createTheme(it.value, false, it))
        this.handleThemeClick(this.themeList.at(0))
      },
      immediate: true,
    },
  },

  methods: {
    ...mapActions(['getSystemThemeList']),

    handleThemeClick(theme) {
      this.themeList.forEach((it) => (it.active = it === theme))
    },

    handleThemeMove(direction, theme, i) {
      // console.log('handleThemeMove', direction, theme, i)
      let order = 0
      switch (direction) {
        case 'up':
          if (i === 0) return
          order = i - 1
          break

        case 'down':
          if (i === this.themeList.length - 1) return
          order = i + 1
          break

        default:
          throw new Error('error action')
      }
      this.classifyOrderUpdate(theme.key, { order })
    },

    handleThemeEdit(theme) {
      this.operType = 'edit'
      theme.edit = true
    },

    handleThemeDelete(index) {
      // console.log(this.$refs['poptipDelete'][index])
      this.$refs['poptipDelete'][index].handleClick()
    },

    handleThemeRemove(theme) {
      this.classifyRemove(theme.key)
    },

    handleThemeEditComplete(theme) {
      // console.log('handleThemeEditComplete', theme)
      /* 点击新增请求接口 */
      if (this.operType === 'add') {
        if (!theme.text_ipt.trim()) {
          return this.$Message.error('不可为空')
        }
        this.classifyAdd({ type: 'THEME', name: theme.text_ipt })
      } else if (this.operType === 'edit') {
        this.classifyUpdate(theme.key, { name: theme.text_ipt })
      }
    },

    handleThemeEditCancel(theme) {
      /* 点击新增取消时直接删除 */
      if (this.operType === 'add') {
        this.themeList = this.themeList.filter((it) => it !== theme)
      } else {
        theme.edit = false
      }
    },

    handleAddTheme() {
      // console.log('handleAddTheme')
      this.operType = 'add'
      this.themeList.push(createTheme('', true))
    },

    handleRequestStatus(res, tipText) {
      const status = res.data.status
      if (status === 0) {
        tipText && this.$Message.success(tipText + '成功')
        this.getSystemThemeList()
      } else {
        tipText && this.$Message.error(res.data.message || tipText + '失败')
      }
    },

    /* 新增请求 */
    async classifyAdd(params) {
      const res = await classifyAdd(params)
      this.handleRequestStatus(res, '新增')
    },

    /* 编辑请求 */
    async classifyUpdate(id, params) {
      const res = await classifyUpdate(id, params)
      this.handleRequestStatus(res, '编辑')
    },

    /* 排序请求 */
    async classifyOrderUpdate(id, params) {
      const res = await classifyOrderUpdate(id, params)
      this.handleRequestStatus(res, false)
    },

    /* 删除请求 */
    async classifyRemove(id) {
      const res = await classifyRemove(id)
      this.handleRequestStatus(res, '删除')
    },
  },
}
</script>

<style lang="less" scoped>
.theme-config--list {
  width: 340px;
  // transition: all 0.8s;
}

.theme-config--item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: var(--app-text-2);
  border: 1px solid #e8e8e8;
  border-top: none;

  // a {
  //   display: block;
  //   height: 100%;
  // }

  /deep/ .ivu-input-wrapper {
    .ivu-input {
      height: 50px;
    }
  }

  .tc-ipt {
    display: block;
    width: 100%;
    padding: 0 14px;
    outline: none;
    border: none;
  }

  .tc-oper--edit,
  .tc-oper {
    // display: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 4px;
    button {
      padding: 0 2px;
      color: currentColor;
    }
  }
  .tc-oper--edit {
    display: block;
    visibility: visible;
  }
}
.theme-config--item:first-of-type {
  border-top: 1px solid #e8e8e8;
}
.theme-config--item.active {
  color: #fff;
  background-color: var(--app-text-active);
}
.theme-config--item:hover {
  .tc-oper {
    // display: block;
    visibility: visible;
  }
}
</style>
